<!--
 * @description  :物品代保管列表
 * @descriptionDetail:物品代保管列表
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-12-22 14:37:52
-->
<template>
	<view>
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<u-icon color="#FFF" name="plus-circle" size="38" @click="addMenu"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="nolicence-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
			<view class="nolicenSearch">
				<u-search shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true" :placeholder="plTitle" v-model="searchKey" @custom="toSearchList"></u-search>
			</view>
			<view class="tab-lay">
				<u-tabs :is-scroll="false" :list="tabList" :current="currentTab" @change="tabChange"></u-tabs>
			</view>
		</view>

		<view class="content u-page">
			<me-table :i="0" :index="0" :top="120" :load-data="loadData" :height="getListViewHeight()" :init-load="false" ref="mescrollItem0">
				<view slot-scope="d" class="list-item-root">
					<view class="list-lay">
						<articleManageItem :itemInfo="d.data"></articleManageItem>
					</view>
				</view>
			</me-table>
		</view>
		<view>
			<u-action-sheet :list="addTabList" v-model="addMenuShow" @click="gridClick"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
	import meTable from '@/components/me-table.vue';
	import articleManageItem from './artcle/articleManageItem.vue';
	import storeService from '@/service/store/store.service.js';
	import fabButton from '@/components/uni-fab.vue';

	import {
		ESCROW_TYPE,
	} from '@/service/store/mapping/enum.js';
	export default {
		components: {
			meTable,
			fabButton,
			articleManageItem,
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				tabList: [{
						id: 1,
						icon: 'wuliu2',
						name: '全部',
						text: '全部',
					},
					{
						id: 2,
						icon: 'kuaidi',
						name: '移送案件(入库)',
						text: '移送案件',
					},
					{
						id: 3,
						icon: 'quanliqingdan',
						name: '外单位案件(入库)',
						text: '外单位案件',
					},
				],
				addTabList: [{
						id: 1,
						icon: 'kuaidi',
						name: '移送外单位案件代管',
						text: '移送外单位案件代管',
						path: 'pages/store/artcle/addArticleCase',
					},
					{
						id: 2,
						icon: 'quanliqingdan',
						name: '外单位查货案件代管',
						text: '外单位查货案件代管',
						path: 'pages/store/artcle/addExternalUnitsCase',
					},
				],
				currentTab: 0,
				searchKey: '',
				customStyle: {
					padding: '30rpx',
				},
				user: this.$storage.get(this.$rp.common.USER),
				plTitle: '案件编号',
				addMenuShow: false,
				fContent: [{
					iconPath: require('@/static/add.png'),
					selectedIconPath: require('@/static/add.png'),
					text: '新增',
					active: false,
				}],
			};
		},
		mounted() {
			this.setRightBtns();
		},
		methods: {
			getListViewHeight() {
				let p = this.$u.sys().windowHeight - 44 - 57 - 40 - uni.upx2px(10) - this.$u.sys().statusBarHeight + 'px';
				// #ifdef H5-DINGDING || H5-WECHAT
				p = this.$u.sys().windowHeight - uni.upx2px(10) - 57 - 40 - this.$u.sys().statusBarHeight + 'px';
				// #endif
				return p;
			},
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight('新增', () => {
					this.addMenu();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.addMenu();
				}
			},
			tabChange(n) {
				this.currentTab = n;
				this.searchKey = '';
				// // TODO 是否需要滚动到top
				this.$refs.mescrollItem0.listDatas = [];
				this.getMescroll(0).triggerDownScroll();
			},
			toSearchList(e) {
				this.getMescroll(0).triggerDownScroll();
			},
			loadData(page) {
				let params = {
					page: page.num,
					limit: page.size,
					paras: {},
				};
				let fun = '';
				return new Promise((resolve, reject) => {
					switch (this.currentTab) {
						case 0: {
							params.paras.custodyType = ''; // 全部
							params.paras.caseCode = this.searchKey;
							fun = storeService.queryCustodyList;
						}
						break;
						case 1: {
							params.paras.custodyType = ESCROW_TYPE.TRANSFER; // 移送案件入库
							params.paras.caseCode = this.searchKey;
							fun = storeService.queryCustodyList;
						}
						break;
						case 2: {
							params.paras.caseCode = this.searchKey;
							params.paras.custodyType = ESCROW_TYPE.EXTERNAL; // 外单位案件入库
							fun = storeService.queryCustodyList; // para
						}
						break;
					}
					fun(params)
						.then((res) => {
							if (res.success) {
								resolve({
									count: res.count,
									data: res.data,
								});
							} else {
								resolve({
									count: 0,
									data: [],
								});
							}
						})
						.catch((e) => {
							this.$u.toast('请求失败:' + e);
							resolve({
								count: 0,
								data: [],
							});
						});
				});
			},
			// 新增
			gridClick(i) {
				this.addMenuShow = false;
				this.$u.route({
					url: this.addTabList[i].path,
				});
			},
			addMenu() {
				this.addMenuShow = true;
			},
			updateBackState(param) {
				this.getMescroll(0).triggerDownScroll();
			},
		},
	};
</script>

<style scoped lang="scss">
	@import '@/style/common/rightMenu.scss';

	page {
		background-color: #f3f4f5;
	}

	.content {
		background-color: #f3f4f5;
		margin-top: 35px;
	}

	.nolicence-search-lay {
		// background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
		background-color: #ffffff;
		border-bottom: 1px solid $u-border-color;
	}

	.nolicenSearch {
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.key-search {
		width: 100%;
		margin: auto;
		padding-left: 2.5%;
		padding-right: 2.5%;
		line-height: 48px;
		border-bottom: 1px solid $u-border-color;
	}

	.pop-content-lay {
		padding: 20rpx;
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: center;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.list-lay {
		margin: 10px;
	}

	.list-item-root {
		margin: 10px;
		border-radius: 15px;
		overflow: hidden;
		border-bottom: 1px solid $u-border-color;
		background-color: #fff;
	}

	.u-tabs__wrapper__scroll-view-wrapper {
		width: 100%;
	}
</style>
